<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 15px;

        }
        .table-search-fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }

    </style>
</head>
<body>
    <div class="div-content">
        <form class="layui-form layui-form-pane" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">学生姓名</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline" id="range">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" id="startDate" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" id="endDate" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="btn-search">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索</button>
                    <button lay-submit lay-filter="btn-search-filter" type="reset" class="layui-btn layui-btn-radius layui-btn-primary" id="btn-reset">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件</button>
                </div>

            </div>
        </fieldset>
        </form>
        <table id="table-student" lay-filter="table-student-filter"></table>
    </div>
    <script type="text/html" id="converDept">
        {{#
        return d.dept.deptName
        }}
    </script>
<!--    触发头部工具栏事件-->
    <script type="text/html" id="table-student-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-circle"></i>
                插入</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i>
                删除</button>
<!--            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>-->
        </div>
    </script>

    <script type="text/html" id="col-student-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
    <script th:src="@{layui/layui.js}" charset="utf-8"></script>
    <script th:inline="javascript">
        function refreshTable(){
            $("#btn-reset").click();
            $("#btn-search").click();
        }

        var ctxPath = [[@{/}]];

        layui.use(['laydate','table','form'], function(){


            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#range' //开始时间和结束时间所在 input 框的父选择器
                ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
            });

            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#table-student'
                , url:  ctxPath+'student/list' //数据接口
                , page: true //开启分页
                , toolbar: "#table-student-toolbar"
                , cols: [[ //表头
                    {type: "checkbox",width: 60}
                    , {field: 'stuId', title: '学号', width: 120.5, sort: true }
                    , {field: 'name', title: '姓名', width: 95 }
                    , {field: 'sex', title: '性别', width: 89.99, sort: true}
                    , {field: 'age', title: '年龄', width: 79.99,sort: true}
                    , {field: 'className', title: '班级', width: 177}
                    , {field: 'birthday', title: '出生日期', width: 136.99, sort: true}
                    , {field: 'address', title: '住址', width: 254.98}
                    , {field: 'dept', title: '院系', width: 201 ,templet: "#converDept"}
                    , {title: '操作', width: 134.99,toolbar: '#col-student-toolbar'}
                ]]
            });
            //表格头部与工具栏的监听
            table.on('toolbar(table-student-filter)', function(obj){
                if (obj.event==='add'){
                    layer.open({
                        type: 2,
                        title: "插入学生",
                        area: ['100%', '100%'],
                        // shadeClose: true, //点击遮罩区域关闭
                        content: ctxPath+'student/insertStudent' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                }else if (obj.event==='delete'){
                    var checkStatus = table.checkStatus('table-student'); //idTest 即为基础参数 id 对应的值
                    //如果没有选中任何数据
                    if (checkStatus.data.length===0){
                        layer.alert("未选中数据",{icon:2,anim:6,title: "警告"})
                        return false;
                    }

                    // console.log(checkStatus.data) //获取选中行的数据
                    //选中的id
                    var idArr=[];
                    $(checkStatus.data).each(function () {
                        idArr.push(this.stuId);
                    });

                    //eg1
                    layer.confirm('确认删除选中项？', {icon: 3, title:'删除确认'}, function(index){
                        //do something
                        //异步请求删除信息，结果提示，刷新表格
                        var url=ctxPath+"student/"+idArr.join(",");
                        var params={
                            _method:"DELETE"
                        }
                        $.post(url,params,function (response) {
                            if (response.code===0){
                                layer.msg(response.message, {icon:1,title:"操作结果"});
                                refreshTable();
                            }else {
                                layer.alert(response.message,{icon:2,anim: 6})
                            }

                        })

                        layer.close(index);
                    });

                }

            });
            //监听表单提交
            var form=layui.form;

            form.on('submit(btn-search-filter)', function(data){
                // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //刷新表格
                table.reload('table-student', {
                    where: { //设定异步数据接口的额外参数，任意设
                        name: data.field.name,
                        startDate: data.field.startDate,
                        endDate: data.field.endDate
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //监听操作列
            table.on('tool(table-student-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
               if (layEvent==='del'){
                   //eg1
                   layer.confirm('确认删除该学生：'+data.name+'?', {icon: 3, title:'删除确认'}, function(index){
                       //do something
                       //异步请求删除信息，结果提示，刷新表格
                       var url=ctxPath+"student/"+data.stuId
                       var params={
                           _method:"DELETE"
                       }
                       $.post(url,params,function (response) {
                           if (response.code===0){
                               layer.msg(response.message, {icon:1,title:"操作结果"});
                               refreshTable();
                           }else {
                               layer.alert(response.message,{icon:2,anim: 6})
                           }

                       })
                       layer.close(index);
                   });
               }else if (layEvent==='edit'){
                   layer.open({
                       type: 2,
                       title: "编辑学生",
                       area: ['100%', '100%'],
                       // shadeClose: true, //点击遮罩区域关闭
                       content: ctxPath+'student/'+data.stuId //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                   });
               }


            });
        });
    </script>
</body>

</html>